<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>空港智慧房屋</title>
    <link rel="stylesheet" href="./style/css.css">
    <link rel="stylesheet" href="./icon-font/iconfont.css">
</head>

<body>
    <div id="app">
        <header>
            <div class="main clearfix">
                <div class="logo"></div>
                <div class="nav">
                    <ul class="clearfix">
                        <li @click="to(index)" v-for="(nav, index) in navs" :keys="index" :class="{ 'active': index == currentIndex }">{{ nav }}</li>
                        <li>
                            <i class="iconfont icon-phone2"></i>&nbsp;移动端
                        </li>
                    </ul>
                    <div class="login">
                        <span class="iconfont icon-login">&nbsp;登录</span> | <span class="iconfont icon-user">&nbsp;注册</span>
                    </div>
                </div>
            </div>
        </header>

        <div class="content">
            <div class="banner">
                <div class="search">

                </div>
            </div>

            <section>
                <h1 class="title">品质公寓<span>QUALITY APARTMENT</span></h1>
                <div>
                    <ul>
                        <li>
                            空港幸福里棚改二期
                        </li>
                        <li>
                            空港幸福里棚改二期
                        </li>
                        <li>
                            空港幸福里棚改二期
                        </li>
                        <li>
                            空港幸福里棚改二期
                        </li>
                    </ul>
                </div>
            </section>

            <section>
                <h1 class="title">优选房型<span>PREFERRED ROOM TYPE</span></h1>
                <div style="height: 500px;">

                </div>
            </section>

            <section>
                <h1 class="title">新盘入市<span>RECOMMENDED FAMILY</span></h1>
                <div style="height: 500px;">

                </div>
            </section>

            <section>
                <h1 class="title">“智”友圈<span>CIRCLE OF FRIENDS</span></h1>
                <div style="height: 500px;">

                </div>
            </section>
            
        </div>

        <footer>

        </footer>
    </div>
    <!-- 生产环境版本，优化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                navs: ['首页', '房源搜索', '新盘入市', '新闻资讯', '智慧社区', '关于我们'],
                currentIndex: 0,
                message: 'Hello Vue!'
            },
            methods: {
                to(index) {
                    this.currentIndex = index
                }
            }
        })
    </script>
</body>

</html>